import React, { Component } from 'react'
import "./Pay.css";
import { NavBar, Icon } from "antd-mobile";

export default class Pay extends Component {
    state = {
        goods: [],
        sum: 0,
        totalPrice: 0
    }
    componentDidMount() {
        let goods_str = localStorage.getItem("carts");
        let goods = JSON.parse(goods_str || "[]");
        let sum = 0;
        let totalPrice = 0;
        goods = goods.filter((v) => {
            if (v.checked) {
                return true;
            }
        })
        goods.forEach((v, i) => {
            sum += v.num;
            totalPrice += v.goods_price * v.num
        }
        )
        this.setState({
            goods, sum, totalPrice
        })
        console.log(goods);
    }
    render() {
        return (
            <div className="yg-pay">
                <div className="yg-pay-nav">
                    <NavBar
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.history.go(-1)}
                    >支付</NavBar>
                </div>
                <div className="yg-pay-selectAddress">
                    <div className="selectAddress-text">选择地址</div>
                </div>
                <div className="yg-pay-list">
                    <h3 className="list-title">已选商品</h3>
                    <div className="content-list">
                        {this.state.goods.map((v, i) => {
                            return <div className="content-list-item" key={v.goods_id}>
                                <div className="list-item-middle">
                                    <img src={v.goods_small_logo} alt="" />
                                </div>
                                <div className="list-item-right">
                                    <div className="item-right-top">{v.goods_name}</div>
                                    <div className="item-right-bottom">
                                        <div className="right-bottom-left">￥{v.goods_price}</div>
                                        <div className="right-bottom-right">
                                            <span className="num">X{v.num}</span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        })}
                    </div>
                </div>
                <div className="yg-pay-bottom">
                    <div className="pay-bottom-left">
                        <div className="totalPrice">
                            <span className="text1">合计:</span>
                            <span className="price">￥{this.state.totalPrice}</span>
                        </div>
                    </div>
                    <div className="content-bottom-right">
                        <div className="pay">
                            {this.state.sum ? <span className="text3" onClick={this.gotoPay}>去支付({this.state.sum})</span> : <span className="text5">去支付({this.state.sum})</span>}
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
